<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐在自学</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/layui/layui.js"></script>
</head>

<body>
<div class="layui-container">
    <div class="layui-row top_row">
        <div class="layui-col-xs4">
            <a href="#"><img src="" alt="">log图标</a>
        </div>
        <div class="layui-col-xs4 layui-col-xs-offset4 top_but">
            <a href="http://auth.lyfx.com/login" class="layui-btn  layui-btn-primary">登录</a>
            <a href="http://auth.lyfx.com/reg" class="layui-btn" style="background-color: #66CCFF;">注册</a>
        </div>
    </div>

    <div class="layui-row menu-list">
        <div class="menu-item layui-col-xs3 first">
            <a href="/courses/" class="menu-link">
                <i class="layui-icon layui-icon-spread-left"></i>
                全部课程
            </a>
        </div>
        <div class="menu-item layui-col-xs1">
            <a href="/paths/" class="menu-link">
                路线 </a>
        </div>
        <div class="menu-item layui-col-xs1">
            <a href="/bootcamp/" class="menu-link">
                下载 </a>
        </div>
        <div class="menu-item layui-col-xs1">
            <a href="/louplus/" class="menu-link">
                问答 </a>
        </div>
        <div class="menu-item layui-col-xs1">
            <a href="/vip/" class="menu-link"> <img src="/static/images/hot.svg"
                                                    class="tag"> 社区 </a>
        </div>
        <div class="menu-item layui-col-xs1 menu-hover">
            <a href="/questions/" class="menu-link">
                更多<i class="layui-icon layui-icon-down" style="font-size: 13px;"></i>
            </a>
            <ul class="sub-menus default-hidden">
                <li>
                    <a href="/questions/" class="menu-link">地区薪资</a>
                </li>
                <li>
                    <a href="/library/" class="menu-link">在线工具</a>
                </li>
                <li>
                    <a href="/live/" class="menu-link">在线项目</a>
                </li>
            </ul>
        </div>
        <div class="search-input layui-col-xs2 layui-col-xs-offset2">
            <div class="search">
                <ul>
                    <li class="form-inline">
                        <form class="form-inline search-form">
                            <input type="text" placeholder="搜索 课程" autocomplete="off"
                                   class="layui-input search-input" value="" id="search-input">
                            <i id="search-i" class="layui-icon layui-icon-search search-icon"></i>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-row row-position">
        <div class="menuContent layui-col-xs3" id="menuContent">
            <div class="item" th:each="cats,iterStat : ${categorys}" th:if="${iterStat.count<=8}">
                <div class="cate-item">
                        <span class="group">
                            <span class="item-group-i"><b th:text="${cats.name}">技术</b></span><i class="layui-icon layui-icon-right"></i>
                            <a th:each="catbeat : ${cats.bestCatList}" th:attr="cour-data='search_'+${catbeat.catId}" th:href="'http://search.lyfx.com/all-class?category=f1000'+${catbeat.catId}" th:text="${catbeat.name}">Java</a>
                        </span>
                    <div class="layui-card cate-list">
                        <p class="menu-article" th:text="${cats.name}">技术</p>
                        <ul>
                            <li th:each="cats1 : ${cats.catalog2List}">
                                <h4 th:text="${cats1.name}">后端开发</h4>
                                <div class="text">
                                    <a th:each="cat2 : ${cats1.catalog3List}" th:attr="cour-data='search_'+${cat2.catId}" th:href="'http://search.lyfx.com/all-class?category=f1000'+${cat2.catId}" th:text="${cat2.name}">Java</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="show-all" style="display: block;">
                显示全部课程
            </div>


            <div class="all-box" style="display: none;">
                <div class="item" th:each="cats,iterStat : ${categorys}" th:if="${iterStat.count>8}">
                    <div class="cate-item">
                        <span class="group">
                            <span class="item-group-i"><b th:text="${cats.name}">技术</b></span><i class="layui-icon layui-icon-right"></i>
                            <a th:each="catbeat : ${cats.bestCatList}" th:attr="cour-data='search_'+${catbeat.catId}" th:href="'http://search.lyfx.com/all-class?category=f1000'+${catbeat.catId}" th:text="${catbeat.name}">Java</a>
                        </span>
                        <div class="layui-card cate-list">
                            <p class="menu-article" th:text="${cats.name}">技术</p>
                            <ul>
                                <li th:each="cats1 : ${cats.catalog2List}">
                                    <h4 th:text="${cats1.name}">后端开发</h4>
                                    <div class="text">
                                        <a th:each="cat2 : ${cats1.catalog3List}" th:attr="cour-data='search_'+${cat2.catId}" th:href="'http://search.lyfx.com/all-class?category=f1000'+${cat2.catId}" th:text="${cat2.name}">Java</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 轮播图 -->
<div class="layui-row bg_row">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs9 layui-col-xs-offset3">
                <div class="layui-carousel" id="home-swapper" lay-filter="home-swapper">
                    <div carousel-item>
                        <div>
                            <a href="#" class="inline-block img-wrapper"><img  src="/static/images/logo01.png"></a>
                        </div>
                        <div>
                            <a href="#" class="inline-block img-wrapper"><img  src="/static/images/logo02.png"></a>
                        </div>
                        <div>
                            <a href="#" class="inline-block img-wrapper"><img  src="/static/images/logo03.png"></a>
                        </div>
                    </div>
                </div>
                <!-- 条目中可以是任意内容，如：<img src="">  -->
            </div>
        </div>
    </div>
</div>
<div style="height: 10px;clear: both;"></div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-card layui-col-xs12">
            <div class="layui-card-header"><span target="_blank" style="font-size: 18px;">优质文章</span> <a href="#"
                                                                                                         target="_blank">更多&gt;</a>
            </div>
            <div class="layui-card-body">
                <div>
                        <span class="title-card"><span class="layui-badge-dot layui-bg-orange"></span>&nbsp;<a
                                href="/static/#">标题1</a> </span>
                    <br/>
                    <div class="body-card">
                        <span>内容1.。</span>
                        <div>
                            <i class="layui-icon layui-icon-group" style="color: #f03210;"></i><span>200</span>
                        </div>
                    </div>
                    <hr class="layui-bg-blue">
                </div>

                <div>
                        <span class="title-card"><span class="layui-badge-dot layui-bg-orange"></span>&nbsp;<a
                                href="/static/#">标题1</a> </span>
                    <br/>
                    <div class="body-card">
                        <span>内容1.。</span>
                        <div>
                            <i class="layui-icon layui-icon-group" style="color: #f03210;"></i><span>200</span>
                        </div>
                    </div>
                    <hr class="layui-bg-blue">
                </div>
                <div>
                        <span class="title-card"><span class="layui-badge-dot layui-bg-orange"></span>&nbsp;<a
                                href="/static/#">标题1</a> </span>
                    <br/>
                    <div class="body-card">
                        <span>内容1.。</span>
                        <div>
                            <i class="layui-icon layui-icon-group" style="color: #f03210;"></i><span>200</span>
                        </div>
                    </div>
                    <hr class="layui-bg-blue">
                </div>
                <div>
                        <span class="title-card"><span class="layui-badge-dot layui-bg-orange"></span>&nbsp;<a
                                href="/static/#">标题1</a> </span>
                    <br/>
                    <div class="body-card">
                        <span>内容1.。</span>
                        <div>
                            <i class="layui-icon layui-icon-group" style="color: #f03210;"></i><span>200</span>
                        </div>
                    </div>
                    <hr class="layui-bg-blue">
                </div>
                <div>
                        <span class="title-card"><span class="layui-badge-dot layui-bg-orange"></span>&nbsp;<a
                                href="/static/#">标题1</a> </span>
                    <br/>
                    <div class="body-card">
                        <span>内容1.。</span>
                        <div>
                            <i class="layui-icon layui-icon-group" style="color: #f03210;"></i><span>200</span>
                        </div>
                    </div>
                    <hr class="layui-bg-blue">
                </div>
            </div>
        </div>
    </div>

    <!--  -->
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="site-doc-icon site-doc-anim botwm-box">
                <div class="dishes layui-anim" data-anim="layui-anim-scale"
                     style="width: 150px;height: 150px;background-color: rgb(255, 255, 255)">自学
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="site-doc-icon site-doc-anim botwm-box">
                <div class="dishes layui-anim" data-anim="layui-anim-scale"
                     style="width: 150px;height: 150px;background-color: rgb(255, 255, 255)">坚持
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="site-doc-icon site-doc-anim botwm-box">
                <div class="dishes layui-anim" data-anim="layui-anim-scale"
                     style="width: 150px;height: 150px;background-color: rgb(255, 255, 255)">高薪
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="site-doc-icon site-doc-anim botwm-box">
                <div class="dishes layui-anim" data-anim="layui-anim-scale"
                     style="width: 150px;height: 150px;background-color: rgb(255, 255, 255)">成功
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 尾部引入 -->
<div th:insert="~{_endbar :: endbar}" id="endbar"></div>
</body>
<script>
    layui.use(['carousel', 'jquery'], function () {
        var carousel = layui.carousel;
        var $ = layui.jquery;

        //搜索按钮
        $("#search-i").on('click',function(){
            var keyword = $("#search-input").val();
            window.location.href = "http://search.lyfx.com/all-class?keyword=" + keyword;
        })


        var home_height = $(".menuContent>.item").height() * ($(".menuContent>.item").length + 1) + 'px';
        var showAll_heigth = $(".menuContent>.item").height();
        $(".show-all").css('height', showAll_heigth + 'px')
        //建造实例
        carousel.render({
            elem: '#home-swapper'
            , width: '100%' //设置容器宽度
            , height: home_height
            , arrow: 'always' //始终显示箭头
            ,interval:4000
            //,anim: 'updown' //切换动画方式
        });
        //background: 3蓝 rgb(24, 36, 254); 2云计算rgb(72, 60, 140); 1数据rgb(24, 30, 80);
        //监听轮播切换事件
        carousel.on('change(home-swapper)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            let index = obj.index;
            if(index === 0){
                $(".bg_row").css("background","rgb(24, 30, 80)")
            }else if(index === 1){
                $(".bg_row").css("background","rgb(72, 60, 140)")
            }else if(index === 2){
                $(".bg_row").css("background","rgb(24, 36, 254)")
            }
        });
        //演示动画开始
        //可以在这里修改触发动画的事件
        $('.site-doc-icon .layui-anim').click(function () {
            var othis = $(this), anim = othis.data('anim');

            //停止循环
            if (othis.hasClass('layui-anim-loop')) {
                return othis.removeClass(anim);
            }
            othis.removeClass(anim);
            setTimeout(function () {
                othis.addClass(anim);
            });
            //恢复渐隐
            if (anim === 'layui-anim-fadeout') {
                setTimeout(function () {
                    othis.removeClass(anim);
                }, 1300);
            }
        });
        //演示动画结束


        //隐藏所有卡片元素
        for (let i = 0; i < $("#menuContent .item").length; i++) {
            $("#menuContent .item").eq(i).children(".cate-item").children(".cate-list").hide();
            console.log($("#menuContent .item").height())
            $(".cate-list").css("left", $("#menuContent>.item").width() + "px")
            //  top值 根据以后的数据在修改==============================
            if (i > 6) {
                $("#menuContent .item").eq(i).children(".cate-item").children(".cate-list").css('margin-top', -(showAll_heigth) + "px")
            }
        }

        // menuContent菜单显示效果
        $("#menuContent .item").on('mouseover', function () {
            for (let i = 0; i < $("#menuContent .item").length; i++) {
                $("#menuContent .item").eq(i).children(".cate-item").children(".cate-list").hide();
            }
            $(this).children(".cate-item").children(".cate-list").show()
        })
        //鼠标移除时
        $("#menuContent .item").on('mouseout', function () {
            $(this).children(".cate-item").children(".cate-list").hide()
        })
        //鼠标移入show-all隐藏 all-box显示
        $(".show-all").hover(function () {
            $(".show-all").hide(),
                $(".all-box").show()
        }, function () {
        })
        $("#menuContent").hover(function () {
        }, function () {
            $(".show-all").show(),
                $(".all-box").hide()
        })
    });
</script>

</html>